<template>
    <v-menu location="bottom" v-model="menuShow">
        <template v-slot:activator="{ props }">
            <!-- <VIcon class="ybtn" v-bind="props">mdi mdi-menu-down</VIcon> -->
            <div v-bind="props">
                <div class="r-suggest" :style="{ width: `${width}vw` }">
                    <div class="s-img"></div>
                    <JInput :placeholder="$t('message.Jsuggest.a')" v-model="sug" @change="onChange" @clear="clear"></JInput>
                    <v-progress-circular v-show="loadingShow" class="loading" indeterminate color="primary" size="10"
                        width="2"></v-progress-circular>
                </div>
            </div>
        </template>
        <JEmpty v-show="empty"></JEmpty>
        <v-list v-show="list.length > 0" :style="{ width: `${width}vw` }">
            <div id="inp-all" class="inp-all">
                <YChip v-model="list"></YChip>
                <v-list-item v-for="item in list" class="item" :class="item.nav === 1 ? 'title_' : ''" :id="item.title">
                    <v-list-item-title class="title" v-if="item.nav === 1">
                        <span>{{ item.title }}</span>
                    </v-list-item-title>
                    <v-list-item-title class="list" :class="item.type" v-else @click="() => onDown(item)">
                        <div v-if="item.type === 'entity'" class="entity c-title-4 d-flex flex-column">
                            <span>{{ item.title }}</span>
                            <span class="c-clor c-title-5">{{ item.token }}</span>
                        </div>
                        <div v-if="item.type === 'token'" class="token c-title-4 d-flex flex-column">
                            <span :title="item.item.symbol">{{ item.item.symbol }}
                                <span class="c-clor" :title="item.item.name"> ( {{ item.item.name }})</span>
                            </span>
                            <span class="c-clor c-title-5" :title="item.token">{{ item.token }}</span>
                        </div>
                    </v-list-item-title>
                </v-list-item>
            </div>
        </v-list>
    </v-menu>
</template>

<script lang="ts" setup>
import { ref, toRaw } from "vue";
import JInput from "@/components/j-input/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
import YChip from "@/components/y-chip/index.vue"
import { get } from "@/comm/request";
import { URL_SEARCH } from "@/comm/api";
import { Notify } from "../y-notify/script";
import { getPriceByTime } from "@/comm/web3";
interface SucType {
    address: any[];
    entity: Symbol[];
    symbol: Symbol[];
    token: any[];
}

interface Symbol {
    [key: string]: string;
}

interface ListItem {
    title: string;
    nav?: number;
    token?: string;
    type?: string;
    item: {
        name: string;
        symbol: string;
        tokenAddress: string;
    }
}


defineProps({
    width: {
        type: Number,
        default: 20
    }
});
let tid = 0;
const sug = ref("");
const list = ref<ListItem[]>([]);
const empty = ref(false);
const loadingShow = ref(false);
const menuShow = ref(false);

// 清除搜索列表数据
function clear(){
    list.value=[]
}
const onChange = () => {
    if (!sug.value) return;
    empty.value = false;
    list.value = [];
    clearTimeout(tid);
    tid = window.setTimeout(() => {
        loadingShow.value = true;
        get(URL_SEARCH, { query: sug.value }).then((res: any) => {
            if (res.success) {
                const data: SucType = res.data;
                const data2: Array<any> = [];
                if (Object.keys(data).length > 0) {
                    Object.keys(data).forEach(key => {
                        //@ts-ignore
                        const item: Array<any> = data[key];
                        //如果item的长度大于0
                        if (item.length > 0) {
                            const itm = { title: key, nav: 1 };
                            data2.push(itm);
                            item.forEach(item_ => {
                                if (key === 'entity') {
                                    const itm = { type: key, sub: item_.type, title: item_.name, token: Object.values(item_)[0] };
                                    data2.push(itm);
                                }
                                if (key === 'token') {
                                    const itm = { type: key, title: item_.name, token: item_.tokenAddress, item: item_ };
                                    data2.push(itm);
                                }
                            });
                        }
                    });
                    list.value = data2;
                    const tokenList = list.value.filter(item => item.type === 'token').map(item => toRaw(item));
                    getPriceByTime((tokenList.map(item => item.token) as any),5000).then(onf => {
                        // console.log('yzt', tokenList.map(item => item.token));
                        // console.log('yzt_______token价格数据', onf);
                    });
                    // console.log('yzt____data2', tokenList)
                    empty.value = false;
                } else {
                    empty.value = true;
                }
                loadingShow.value = false;
            }
        }, (err) => {
            console.log('yzt错误发生');
            Notify.alert('not Error', 'warning')
            loadingShow.value = false;
        });
    }, 200);
};
const onDown = (item: any) => {
    if (item.type == "entity") {
        if (item.sub == "individual") {
            window.open("/address/" + item.token);
        }
        else {
            window.open("/entity/" + item.token);
        }

    }
    if (item.type == "address") {
        window.open("/address/" + item.token);
    }
    if (item.type == "token") {
        window.open("/token/" + item.token);
    }
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
